import { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import React, { useImperativeHandle, forwardRef, useState, useRef, useEffect } from 'react';
import { message, Form, Tree } from 'antd';
import request from '@/utils/request';
import apiPath from '@/utils/apiPath.js';
import md5 from 'js-md5';

const EditModalFormRef = (props, ref) => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [currentRow, setCurrentRow] = useState({});
  const modalformRef = useRef();
  
  useImperativeHandle(ref, () => ({
    initModal: (row) => {
      modalformRef.current?.resetFields();
      setCurrentRow(row);
      handleModalVisible(true);
    }
  }))

  /**
   * 添加节点
   *
   * @param fields
   */
  const handleAdd = async (fields) => {
    // 密码输入验证
    if (fields.newpassword !== fields.password2) {
      message.warning('密码输入不一致，请再次确认密码。');
      return;
    }
    let method = 'POST';
    let url = apiPath.ADMIN_CHANGE_PASSWORD;
    let updateForm = {
      id: currentRow.id,
      password: md5(fields.password),
      newpassword: md5(fields.newpassword),
    };
    const hide = message.loading('正在修改');
    try {
      await request(url, {
        method,
        data: updateForm,
      });
      hide();
      props.onReload();
      message.success('修改成功');
      return true;
    } catch (error) {
      hide();
      // message.error('修改失败请重试！');
      return false;
    }
  };

  return (
    <ModalForm
      title={`修改密码`}
      width="400px"
      formRef={modalformRef}
      layout="horizontal"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 18 }}
      visible={createModalVisible}
      onVisibleChange={(value) => {
        handleModalVisible(value);
      }}
      onFinish={async (value) => {
        const success = await handleAdd(value);

        if (success) {
          handleModalVisible(false);

          if (actionRef.current) {
            actionRef.current.reload();
          }
        }
      }}
    >
      <ProFormText.Password
        rules={[
          {
            required: true,
            message: "请输入旧密码",
          }
        ]}
        width="md"
        label="旧密码"
        name="password"
        fieldProps={{
          autoComplete: "new-password"
        }}
      />
      <ProFormText.Password
        rules={[
          {
            required: true,
            message: "请输入新密码",
          },
          {
            type: 'pattern', 
            pattern: /^[0-9a-zA-Z]{6,12}$/,  
            message: '支持6-12位的数字和英文字母组合'
          }
        ]}
        width="md"
        label="新密码"
        name="newpassword"
        fieldProps={{
          autoComplete: "new-password"
        }}
      />
      <ProFormText.Password
        rules={[
          {
            required: true,
            message: "请再次确认密码",
          },
        ]}
        width="md"
        label="确认密码"
        name="password2"
      />
      
    </ModalForm>
  )
}
const EditModalForm = forwardRef(EditModalFormRef);
export default EditModalForm;